<template>
  <div class="orderDetail">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="clearfixText">基本信息</span>
      </div>
      <span class="statusImg">
        <img v-if="orderDetail.status === 'DONE'" src="@/images/已完成.png">
        <img v-else-if="orderDetail.status === 'CANCEL'" src="@/images/已取消.png">
        <img v-else-if="orderDetail.status === 'STOP'" src="@/images/已终止.png">
      </span>
      <!-- 存放表格传过来的订单号 -->
      <div class="orderNumben">订单号:{{ orderDetail.orderNo }}</div>
      <div class="orderDetail_timeline">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :icon="activity.icon"
            :type="activity.type"
            :color="activity.color"
            :size="activity.size"
            :timestamp="activity.timestamp"
          >
            <div>{{ activity.content }}</div>
            <div class="content2">{{ activity.content2 }}</div>
          </el-timeline-item>
        </el-timeline>
        <span class="distance">
          <!-- <div>{{ orderDetail.totalWeight }}</div>
          <div>km</div> -->
        </span>
      </div>
      <div class="logistics_information">
        <span>货物：{{ orderDetail.goodsName }}</span>
        <span>货物类型：{{ orderDetail.goodsType }}</span>
        <span>派单重量：{{ orderDetail.totalWeight }}</span>
      </div>
    </el-card>
    <el-card class="box-card tablePagination">
      <div slot="header" class="clearfix">
        <span class="clearfixText">运单信息</span>
      </div>
      <el-table :data="waybillTable" border style="width: 100%">
        <el-table-column prop="freightNo" label="运单号" width="200" />
        <el-table-column prop="loadingWeight" label="重量" />
        <el-table-column prop="advanceMoney" label="预付款" />
        <el-table-column prop="tailMoney" label="尾款" />
        <el-table-column prop="receiptMoney" label="回单款" />
        <el-table-column prop="priceMoney" label="单价（元/吨）" />
        <el-table-column prop="address" label="运单金额" />
        <el-table-column prop="address" label="服务费" />
        <el-table-column prop="driverPhone" label="手机号" />
        <el-table-column prop="address" label="派单时间" />
        <el-table-column prop="address" label="订单状态">
          <template slot-scope="{row}">
            {{ orderStatus(row.status) }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :total="0"
        :current-page="pager.current"
        :page-sizes="pager.sizes"
        :page-size="pager.size"
        @current-change="waybillTableCurrentChange"
        @size-change="waybillTableSizeChange"
      />
    </el-card>
    <el-card class="box-card table_card">
      <div slot="header" class="clearfix">
        <span class="clearfixText">订单日志</span>
      </div>
      <el-table :data="orderLogTable" border style="width: 100%">
        <el-table-column prop="createdTime" label="时间" width="180" />
        <el-table-column prop="createdUserName" label="上报人" width="180" />
        <el-table-column label="操作">
          <template slot-scope="{row}">
            {{ operateType(row.operationType) }}
          </template>
        </el-table-column>
        <el-table-column prop="targetStatus" label="订单状态">
          <template slot-scope="{row}">
            {{ orderStatus(row.targetStatus) }}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="备注" />
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getOrderDetail } from '@/api/tms/order'
export default {
  data() {
    return {
      orderNo: '',
      pager: {
        total: 0,
        sizes: [20, 50, 100],
        size: 20,
        current: 1
      },
      activities: [{
        content: '鸿海物流公司',
        content2: '广东省 广州市 白云区 大院北路',
        timestamp: '2018-04-12 20:46',
        color: '#2297ef'

      }, {
        content: '鸿海物流公司',
        content2: '广东省 广州市 白云区 大院北路',
        timestamp: '2018-04-03 20:46',
        color: '#ff9624'
      }],
      waybillTable: [],
      orderLogTable: [],
      orderDetail: {}
    }
  },
  computed: {
    orderStatus() {
      return function(val) {
        console.log(val)
        if (val === 'CANCEL') {
          return '已取消'
        } else if (val === 'PENDING') {
          return '待装货'
        } else if (val === 'PROCESSING') {
          return '已派单'
        } else if (val === 'COMPLETE') {
          return '已到达'
        } else if (val === 'DONE') {
          return '已完成'
        } else if (val === 'STOP') {
          return '终止'
        }
      }
    },
    operateType() {
      return function(val) {
        if (val === 'CREATE') {
          return '创建订单'
        } else if (val === 'SEND_DRIVER') {
          return '派单给司机'
        } else if (val === 'SEND_FLEET') {
          return '派单给车队'
        } else if (val === 'STOP') {
          return '终止'
        } else if (val === 'ACCEPT') {
          return '接单'
        } else if (val === 'LOADING') {
          return '提货'
        } else if (val === 'UNLOADING') {
          return '送达'
        } else if (val === 'DONE') {
          return '签收'
        } else if (val === 'ESTIMATE') {
          return '评价承运人'
        } else if (val === 'CANCEL') {
          return '取消'
        }
      }
    }
  },
  created() {
    this.orderNo = this.$route.query.id
  },
  async mounted() {
    try {
      const res = await getOrderDetail(this.orderNo)
      this.orderDetail = res
      this.activities = [{
        content: res.loadCompany,
        content2: `${res.loadProvince} ${res.loadCity} ${res.loadDistrict} ${res.loadAddress}`,
        timestamp: `${res.loadDate || ''} ${res.loadTime || ''}`,
        color: '#2297ef'
      }, {
        content: res.unloadCompany,
        content2: `${res.unloadProvince} ${res.unloadCity} ${res.unloadDistrict} ${res.unloadAddress}`,
        timestamp: `${res.unloadDate || ''} ${res.unloadTime || ''}`,
        color: '#ff9624'
      }]
      this.waybillTable = res.freights
      this.orderLogTable = res.orderLogs
    } catch {
      return
    }
  },
  methods: {
    waybillTableCurrentChange(val) {
      this.pager.current = val
      const { freights } = getOrderDetail(this.orderNo)
      this.waybillTable = freights
    },
    waybillTableSizeChange(val) {
      this.pager.size = val
      this.pager.current = 1
      const { freights } = getOrderDetail(this.orderNo)
      this.waybillTable = freights
    }
  }
}

</script>

<style lang='scss'>
.orderDetail {
  width: 100%;
  padding-bottom: 30px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 95%;
    margin-top: 20px;
    position: relative;
    .statusImg{
      position: absolute;
      top: 0;
      right:50%;
    }
    .el-card__header {
      padding: 20px 10px 5px 10px;
      border-bottom: 0;
      .clearfix {
        .clearfixText {
          border-left: 4px solid #1890ff;
          padding-left: 10px;
          font-weight: 700;
        }
      }
    }
    .orderNumben {
      font-weight: 700;
      font-size: 16px;
    }
    // 时间线样式修改
    .orderDetail_timeline {
      position: relative;
      .distance {
        position: absolute;
        top: 35%;
        div {
          text-align: center;
          color: #99a6c4;
        }
      }
    }
    .el-timeline {
      margin-top: 15px;
      margin-left: 35px;
      .el-timeline-item {
        .el-timeline-item__node {
          left: -8px;
          width: 25px;
          height: 25px;
        }
        .el-timeline-item__wrapper {
          .el-timeline-item__content {
            font-weight: 700;
            font-size: 16px;
            .content2 {
              margin-top: 10px;
            }
          }
          .el-timeline-item__timestamp {
            font-size: 14px;
          }
        }
      }
      .el-timeline-item:nth-child(1) {
        padding-bottom: 100px;
      }
    }
    // 物流信息
    .logistics_information {
      font-size: 15px;
      width: 50%;
      height: 80px;
      border-top: 1.5px dashed black;
      border-bottom: 1.5px dashed black;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 0 60px 0 0;
    }
  }
  .tablePagination {
    .el-pagination {
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>

